<template>
	<view class="AppUpdate" v-if="app_show" @click="$emit('updateShow')">
		<view class="box">
			<image class="img" src="../../static/images/huangjin/ic_ar.png" mode="widthFix"></image>
			<view class="titlet">发现新版本</view>
			<view class="contents">{{content}}</view>
			<view class="line-box" v-show="line">
				<view class="line">
					<view class="lines" :style="{width:progress}"></view>
				</view>
				<view style="line-height: 26px;font-size: 12px;">下载进度 {{progress}}</view>
			</view>
			<template v-if="InfoSync.platform === 'ios'">
			  <view class="update"  @click.stop="$qqyUtils.copyBankCard(url)">点我复制</view>
			</template>
			<template v-else>
			  <view class="update" v-if="show" @click.stop="checkUpdater()">更新</view>
			  <view class="update" v-else @click.stop="restartApp()">更新完成</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				progress: '0%',
				show: true,
				filUrl: '',
				line: false,
        downloads: false,
        InfoSync: {},
			};
		},
		props: ['app_show', 'content', 'type', 'url'], //app_show 显示弹窗 content 更新内容 type 1 整包更新 2 资源包更新  URL 更新包下载地址
    mounted() {
      this.InfoSync = uni.getSystemInfoSync()
    },
		methods: {
			checkUpdater: function() {
        if (this.downloads) return
        this.downloads = true
				let _this = this;
				
				if (this.type == '1') {
					// plus.runtime.openURL(this.url);
					plus.runtime.openURL(this.url);
					return false;
				}
				this.line = true;
				const downloadTask = uni.downloadFile({
					url: _this.url,
					success: (downloadResult) => {
						if (downloadResult.statusCode === 200) {
							_this.filUrl = downloadResult.tempFilePath;
						}
					}
				});
				downloadTask.onProgressUpdate((res) => {
					_this.progress = res.progress + '%';
					if (res.progress >= 100) {
						_this.show = false
					}
				});
        
        
        // var downToak = plus.downloader.createDownload(_this.url, { //拿到下载任务的对象
        //   filename: '_doc/update/'
        // }, function(d, status) {
        //   plus.nativeUI.closeWaiting();
        //   if (status == 200) { //在回调中根据状态 进行操作
        //     plus.runtime.install(d.filename, {force: true}, {}, function(error) {
        //       uni.showToast({
        //         title: '更新失败'+error,
        //         mask: false,
        //         duration: 1500
        //       });
        //     })
        //   } else {
        //     app.alert("配置出错,请检查网络链接！");
        //   }
        // });
        // downToak.start(); // 开启下载的任务
        // var prg = 0;
        // downToak.addEventListener("statechanged", function(task, status) { //给下载任务设置一个监听 并根据状态  做操作
        //   switch (task.state) {
        //     case 1:
        //       break;
        //     case 2:
        //       break;
        //     case 3:
        //       prg = parseInt(parseFloat(task.downloadedSize) / parseFloat(task.totalSize) * 100);
        //       // _this.dlbtn = '正在下载 ' + prg + '%'
        //       // _this.right = 100 - Number(prg) + '%'
        //       _this.progress = prg + '%';
        //       if (prg >= 100) {
        //       	_this.show = false
        //       }
        //       break;
        //     case 4:
        //       break;
        //   }
        // });
			},
			restartApp: function() {
				plus.runtime.install(this.filUrl, {
					force: false
				}, function() {
					console.log('install success...');
					plus.runtime.restart();
				}, function(e) {
					console.error('install fail...');
				});
				uni.showTabBar();
			}
		}
	}
</script>

<style lang="less" scoped>
	.AppUpdate {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9999;

		.box {
			width: 80%;
			// height: 200px;
			position: absolute;
			left: 50%;
			top: 45%;
			transform: translate(-50%, -50%);
			background-color: #fff;
			padding: 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			border-radius: 10px;

			.titlet {
				// line-height: 50px;
				font-size: 20px;
				margin-top: 20px;
			}

			.contents {
				padding: 10px;
				text-align: left;
				width: 90%;
			}

			.img {
				width: 150px;
				height: 150px;
				margin-top: -60px;
			}

			.line-box {
				width: 80%;
				text-align: center;
				margin-bottom: 15px;

				.line {
					height: 4px;
					width: 100%;
					background-color: #e6e6e6;
					position: relative;
					border-radius: 4px;
				}

				.lines {
					position: absolute;
					height: 4px;
					top: 0;
					left: 0;
					border-radius: 4px;
					background: linear-gradient(90deg, rgba(45, 163, 158, 1), rgba(3, 252, 177, 1));
				}
			}

			.update {
				font-size: 18px;
				font-weight: 400;
				background-color: #ff5a78;
				width: 80%;
				color: #fff;
				border-radius: 10px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				margin-top: 20px;
			}
		}
	}
</style>
